<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/heade-footer.css">
    <link rel="stylesheet" href="./css/03seek.css">
    <link rel="stylesheet" href="./css/API.css">
    <link rel="stylesheet" href="./css/modal .css">
</head>

<body>
    <!-- 公共样式
    fl,左浮
    fr,右浮动
    bx,怪异盒子
    cb,清除浮动
    rel,相对定位
    abs，绝对定位  
    con ，版心 
  -->
    <!-- 页头 -->
    <div class="heade abs">
        <!-- logo -->
        <a href="./index.html">
            <div class="heade-logo fl"></div>
        </a>
        <!-- 中间的导航 -->
        <ul class="heade-nav abs">
            <li class="fl rel">
                <a href="./index.html">首页
                   
                </a>
            </li>
            <li class="fl">
                <a href="#">API
                     <!-- 空标签模拟下划线 -->
                     <div class="heade-un abs"></div>
                </a>
            </li>
            <li class="fl">
                <a href="./04API-details.html">云服务</a>
            </li>
            <li class="fl">
                <a href="./05case.html">案例</a>
            </li>
        </ul>
        <!-- 登录于注册 -->
        <div class="heade-enter fr">
            <a href="./03seek.html" target="_blank">登录</a>
            <a href="#">注册有礼</a>
        </div>

    </div>
    <!-- 页头结束======================================================= -->
    <!-- 模态框 登录=====================================-->
    <div class="modal">
   <!-- 表单外面的盒子，不同页面使用次表单时，通过此盒子调整表单位置 -->
          <div class="form-box">
            <!-- 表单内容 -->
            <div class="form">
                <img src="./imge/images/loginlogo.png" alt="">
                <p class="form-seek">
                    <span class="form-seek-dl">账号登录</span>
                    <span class="form-seek-span1"></span>
                    <span class="form-seek-zc">扫码登陆</span>
                    <span class="form-seek-span2"></span>
                </p>
                <!-- 输入区域外层套给盒子，用来切换二维码和输入  -->
                <div class="form-input-box">
                    <div class="form-seek-password">
                        <!-- span，模拟盒子，精灵图 -->
                        <span></span>
                        <input type="text" placeholder="用户名/手机号/邮箱">
                    </div>
                    <div class="form-seek-password">
                        <!-- span，模拟盒子，精灵图 -->
                        <span></span>
                        <input type="password" placeholder="密码:6位数字">
                    </div>
                    <!-- 忘记密码 -->
                    <div class="form-forget-password">
                        <span>忘记密码</span>
                    </div>
                    <button class="form-button">登录</button>
                </div>
                <!-- 二维码 -->
                <div class="form-QR">
                    <img src="./imge/images/103-demo.png" alt="">
                    <p>微信扫码</p>
                    <p>未关注源码公众号，请先关注再注册登录</p>
                </div>

                <div class="form-registrant">还没源码账号？
                   <a href="#">
                    <span>立即注册</span>
                    <!-- 标签模拟盒子，精灵图 -->
                    <a></a>
                   </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框注册 -->
     <!-- 注册页面模态框 -->
     <div id="register">
            <div id="header">
                <div class="header-moderator">
                    <img src="./imge/images/loginlogo.png" alt="">
                    <p>已有源码账号<a href="./03seek.html">立即登录</a></p>
                </div>
            </div>
            <!-- 输入框 -->
        <div class="form-back">
            <!-- 标题 -->
            <div class="form-box">
                <h2>
                    欢迎注册
                </h2>
                <h3>
                    百款接口免费试用
                </h3>
                <div class="form-gb">
                    <img src="./imge/images/reg-gift.png" alt=""> 注册即送300元大礼包
                </div>
                <p><input type="text" placeholder="用户名"></p>
                <p><input type="text" placeholder="输入手机号"></p>
                <p><input type="text" placeholder="验证码"><span>获取验证码</span><a>6</a></p>
                <p><input type="text" placeholder="密码"></p>
                <div class="form-deal"><input type="checkbox">
                    我已阅读并接受<a href="#">《源码用户服务协议》 《源码隐私政策》</a>
                </div>
              <button>立即注册</button>
            </div>
        </div>
    </div>
    <!-- 注册模态框结束======================================================= -->
    <!-- 模态框结束====================================================================== -->
    <!-- 分类导航 -->
    <div class="classify">
        <div class="classify-nav">
            <p>分类</p>
            </div>
    </div>
    <!-- 搜索 -->
    <p class="seeks cb">
        <span class="fl">全部</span>
        <input class="seek-txt fl" type="text">
        <a class="fl"></a>
    </p>
    <!-- 分类搜索结束================================= -->
    <!-- 主体导航 -->
    <div class="body-nav">
        <ul class="cb">
       </ul>
    </div>
    <!-- 分页器 -->
    <div class="subentry">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>......</span>
        <span>下一页&gt;</span>
    </div>


    <!-- 页脚======================================================= -->
    <div class="footer con">
        <div class="cb">
            <!-- 左侧导航 -->
            <ul class="footer-nav fl">
                <li>
                    <a href="#">联系与支持</a>
                </li>
                <li>
                    <a href="#">售前咨询 </a>
                </li>
                <li>
                    <a href="#">售后客服</a>
                </li>
                <li>
                    <a href="#">联系电话 </a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">急速工单 </a>
                </li>
                <li>
                    <a href="#">投诉与建议</a>
                </li>
            </ul>
            <ul class="footer-nav fl">
                <li>
                    <a href="#">联系与支持</a>
                </li>
                <li>
                    <a href="#">售前咨询 </a>
                </li>
                <li>
                    <a href="#">售后客服</a>
                </li>
                <li>
                    <a href="#">联系电话 </a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">急速工单 </a>
                </li>
                <li>
                    <a href="#">投诉与建议</a>
                </li>
            </ul>
            <ul class="footer-nav fl">
                <li>
                    <a href="#">联系与支持</a>
                </li>
                <li>
                    <a href="#">售前咨询 </a>
                </li>
                <li>
                    <a href="#">售后客服</a>
                </li>
                <li>
                    <a href="#">联系电话 </a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">急速工单 </a>
                </li>
                <li>
                    <a href="#">投诉与建议</a>
                </li>
            </ul>
            <ul class="footer-nav fl">
                <li>
                    <a href="#">联系与支持</a>
                </li>
                <li>
                    <a href="#">售前咨询 </a>
                </li>
                <li>
                    <a href="#">售后客服</a>
                </li>
                <li>
                    <a href="#">联系电话 </a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">急速工单 </a>
                </li>
                <li>
                    <a href="#">投诉与建议</a>
                </li>
            </ul>
            <ul class="footer-nav fl">
                <li>
                    <a href="#">联系与支持</a>
                </li>
                <li>
                    <a href="#">售前咨询 </a>
                </li>
                <li>
                    <a href="#">售后客服</a>
                </li>
                <li>
                    <a href="#">联系电话 </a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">急速工单 </a>
                </li>
                <li>
                    <a href="#">投诉与建议</a>
                </li>
            </ul>
            <!-- 右侧二维码 -->
            <div class="footer-right fr">
                <p>微信公众号</p>
                <span>源码时代</span>
                <p>
                    <img src="./imge/images/wechat-white.png" alt="">
                </p>
            </div>
        </div>
        <!-- 底部声明 -->
        <div class="footer-statement">
            <p class="fl">
                <img src="./imge/images/bei1.png" alt="">
                <img src="./imge/images/bei2.png" alt=""> 增值电信业务经营许可证：蜀B2-20180596蜀ICP备15006450号-3营业执照
            </p>
            <p class="fr">源码大数据股份有限公司©版权所有</p>
        </div>
        <!-- 返回顶部 -->
        <div class="top">∧</div>
    </div>

</body>
<script src="./js/heade-footer.js"></script>
<script src="./js/03seek.js"></script>
<script src="./js/API.js"></script>
<script src="./js/modal .js"></script>

</html>